<script setup lang="ts">
import { useInfoStore } from '@/stores/info';
import { useRouter } from 'vue-router';
const router = useRouter()
const Window: any = window;
const info = useInfoStore();
const startHandler = async () => {
  if (info.name === '') {
    const res = await Window.app.showNameDialog()
    console.log(res)
    if (res === 0) {
      router.push('/name');
    }
  }
  else {
    //@ts-ignore
    const loading = ElLoading.service({
      lock: true,
      text: '正在检测！！！',
    })
    setTimeout(() => {
      router.push('/result')
      loading.close()
    }, 3000)
  }
}
</script>

<template>
  <div class="top">
    <el-text>当前状态：{{ info.name === '' ? '未实名' : '已实名' }}</el-text>
  </div>
  <h1 class="title">周易-性别检测器</h1>
  <div class="content">
    <img src="../assets/a.jpeg" alt="" height="170">
  </div>
  <div class="submit">
    <el-button type="primary" @click="startHandler">开始检测</el-button>
  </div>
  <div class="bottom">
    <h1 class="auther">作者：熠初shine @bilibili</h1>
  </div>
</template>
<style scoped>
.top {
  margin-left: 10px;
}

.title {
  text-align: center;
  color: #409EFF;
  overflow: hidden;
}

.content {
  margin-top: 20px;
  text-align: center;
}

.submit {
  margin-top: 20px;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 10px;
  width: 100%;
}

.bottom .auther {
  margin-left: 10px;
  font-size: 16px;
  color: #409EFF;
}
</style>